<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>热浪</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper-bundle.min.css">
  <script src="vue.js"></script>
  <script type="text/javascript" src="components/banner.js"></script>
  <script type="text/javascript" src="components/home1.js"></script>
  <script type="text/javascript" src="components/home2.js"></script>
  <script type="text/javascript" src="components/home3.js"></script>
  <script type="text/javascript" src="components/test.js"></script>
  <script src="swiper-bundle.min.js"></script>

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .active{
      color: red
    }

    .swiper-pagination-bullets{
      right: 40px !important;
    }

    .swiper-pagination-bullet{
      margin: 20px 0px !important;
    }

    .swiper-pagination-bulle{
      width: 15px !important;
      height: 15px !important;
    }
  </style>
</head>

<body>
  <div id="app"  class="swiper-container"  ref='swiper'>
  <div style="margin-top:30px;height: 100px;
              z-index: 1000000000000;
              position: fixed;
              
              width: 100%;">
              <div style="display: flex;justify-content: center;">
              <div style="width: 80%;">
                  <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
                      <div style="display: flex;align-items: center;">
                        <img src="./assets/待定备份 2.png" alt="">
                        <div style="font-size: 30px;font-weight: 600;color: white;margin-left: 30px;">
                            热浪App
                        </div>
                      </div>
                      <div style="display: flex;justify-content: space-around;cursor: pointer;">
                        <div v-for="(item,index) in slides">
                          <div 
                          @click="change(index)" style="padding: 10px;font-weight: 500;color: #FFFFFF;">
                              {{ item.txt }}
                          </div>
                          <!-- <div 
                          v-if="current == item.page"
                          style="height: 5px;background-color: white;border-radius: 3px;">

                          </div> -->
                        </div>
                        
                      </div>
              </div>
              </div>
          </div>
              
  </div>
  
  
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <home1></home1>
      </div>
      <div class="swiper-slide">
        <home2
        txt1="./assets/home.png"
        txt2="./assets/home2/位图备份.png"
        txt3="即将开始"
        txt4="年轻人的发声平台"
        txt5="找到感兴趣话题各抒己见 用声音陪伴你"
        ></home2>
    </div>
    <div class="swiper-slide">
        <home2
        txt1="./assets/home3/back.png"
        txt2="./assets/home3/home3.png"
        txt3="一键入座"
        txt4="即刻入局聊天"
        txt5="获取契合人群 随时赶走孤独 年轻人的发声"
        ></home2>
    </div>
    <div class="swiper-slide">
        <home2
        txt1="./assets/home3/back.png   "
        txt2="./assets/bg4.png"
        txt3="上麦聊天"
        txt4="六人制圆桌派"
        txt5="匹配有趣的人 用声音陪伴你 多人制声音社"
        ></home2>
    </div>
    <div class="swiper-slide">
        <home2
        txt1="./assets/home3/back.png   "
        txt2="./assets/bg5.png"
        txt3="动态广场"
        txt4="年轻人要敢想敢说"
        txt5="展示个性 吸引志趣相投的人 带你远离社交"
        ></home2>
    </div>
    <div class="swiper-slide">
        <home3></home3>
    </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

</div>

  <script>
    
    new Vue({
        el: '#app',
        components: {
        },
        data: {
          current: 0,
            slides: [
                {
                  page: 0,
                  txt: '首页'
                },{
                  page: 1,
                  txt: '一键上座'
                },{
                  page: 2,
                  txt: '上麦聊天'
                },{
                  page: 3,
                  txt: '聊天室'
                },{
                  page: 4,
                  txt: '动态广场'
                },{
                  page: 5,
                  txt: '关于我们'
                },
              ]
        },
        mounted () {
          console.log('',this)
            
        },
        methods: {
          change(val){
            this.current=val
            swiper.slideTo(val);
          }
        }
    });

    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    function slideTo(val){
      console.log('-------',val)
      swiper.slideTo(val, 1000, false);
    }
    
  </script>
</body>

</html>
